<script setup lang="ts">
import { onMounted } from 'vue';
import { showLoading } from '@tarojs/taro';
import { formatTimestampStr } from '/@/utils/time';
import { APP_SCHEDULE_ATTENDANCE_RECORD_LIST } from '/@/api/modules/base/app-schedule-attendance';
import { state, filterState } from './state';

/**
 * 选择全部
 **/
function allSelected() {
  filterState.startTime = '';
  filterState.endTime = '';
  refreshList();
}

/**
 * 选择时间过滤
 */
function timeSelected() {
  filterState.TimePickerVisible = true;
}

/**
 * @description 消息列表查询
 * @param {Number} page -当前页
 * @param {Number} pageSize -每页条数
 */
function queryList(page: number = 1, pageSize: number = 15) {
  if (!page && state.finished) return;
  state.loading = true;
  showLoading();
  APP_SCHEDULE_ATTENDANCE_RECORD_LIST({
    comQuery: { page, pageSize },
    /**
     * 上班日期开始，格式：2023-01-31
     */
    workDateStart: filterState.startTime,
    /**
     * 上班日期结束，格式：2023-01-31
     */
    workDateEnd: filterState.endTime,
  })
    .then((res) => {
      state.loading = false;

      if (
        state.activePage >=
        (res.comQuery.pageCount ||
          (res.comQuery.totalCount as number) / (res.comQuery.pageSize as number) ||
          1)
      )
        state.finished = true;
      if (!res.content || !res.content.length) return;

      res.content.forEach((item) => state.list.push(item));

      state.activePage += 1;
    })
    .catch(() => {
      state.loading = false;
    });
}

/**
 * @function 加载
 */
function onLoading() {
  if (state.finished) return;

  queryList(state.activePage);
}

/**
 * 列表刷新
 */
function refreshList() {
  state.activePage = 1;
  state.loading = true;
  state.finished = false;
  state.list = [];
  onLoading();
}

onMounted(() => {
  refreshList();
});

/**
 * 选择时间区域
 */
function selectedTimeRange(startTime: string, endTime: string) {
  filterState.startTime = startTime;
  filterState.endTime = endTime;
  filterState.TimePickerVisible = false;
  refreshList();
}
</script>

<template>
  <view class="attendance-list app-page--1">
    <app-navbar title="考勤打卡" />
    <scroll-view
      class="app-page__wrapper"
      :scroll-y="true"
      :lower-threshold="100"
      @scrolltolower="onLoading()"
    >
      <app-time-range-filter
        :start-time="filterState.startTime"
        :end-time="filterState.endTime"
        @all-selected="allSelected"
        @time-selected="timeSelected"
      />
      <view class="attendance-list__wrapper">
        <view class="attendance-item" v-for="item in state.list" :key="item.id">
          <view class="attendance-item__title">
            <text>{{ item.workDate }}&nbsp;&nbsp;</text>
            <text>{{ item.workScheduleTimeName }}&nbsp;&nbsp;</text>
            <text>{{ item.workHoursPoint }}-{{ item.workAfterHoursPoint }}</text>
          </view>
          <view class="attendance-item__work">
            <view class="attendance-item__work--left">
              <text>上班:&nbsp;&nbsp;</text>
              <text>{{
                formatTimestampStr(item.workHoursValid, 'YYYY/MM/DD HH:mm:ss', '暂无记录')
              }}</text>
            </view>
            <view
              class="attendance-item__work--right"
              :style="{
                backgroundColor: item.workHoursStatus === 1 ? '#26ee4e36' : '#ed4e3626',
                color: item.workHoursStatus === 1 ? '#1ABE96' : '#EE4E36',
              }"
              >{{ item.workHoursStatus === 1 ? '正常' : '异常' }}</view
            >
          </view>
          <view class="attendance-item__work">
            <view class="attendance-item__work--left">
              <text>下班:&nbsp;&nbsp;</text>
              <text>{{
                formatTimestampStr(item.workAfterHoursValid, 'YYYY/MM/DD HH:mm:ss', '暂无记录')
              }}</text>
            </view>
            <view
              class="attendance-item__work--right"
              :style="{
                backgroundColor: item.workHoursStatus === 1 ? '#26ee4e36' : '#ed4e3626',
                color: item.workHoursStatus === 1 ? '#1ABE96' : '#EE4E36',
              }"
              >{{ item.workAfterHoursStatus === 1 ? '正常' : '异常' }}</view
            >
          </view>
        </view>

        <view class="app-page__list-tips">
          <text v-if="!state.list.length">暂无数据！</text>
          <text v-else-if="state.list.length && state.loading">加载中...</text>
          <text v-else-if="state.list.length && state.finished">加载完成!</text>
        </view>
      </view>
    </scroll-view>
    <app-time-range-picker-popup
      v-model="filterState.TimePickerVisible"
      @on-selected="selectedTimeRange"
    ></app-time-range-picker-popup>
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>
